<!--
 * @Author: anshengtyp
 * @Date: 2024-02-27 08:57:06
 * @LastEditTime: 2024-08-21 08:32:07
 * @LastEditors: anshengtyp 1815634838@qq.com
 * @Description: 预览
-->

<template>
  <div class="viewHandler">
    <!-- 标记操作区域 -->
    <div v-show="addMark" class="noteMark">
      <span v-if="addOrEdit === 'add'" style="font-size: 20px;">{{ markType === '' ? '标注列表' : `添加${markType}标注`
        }}</span>
      <span v-else style="font-size: 20px;">{{ markType === '' ? '标注列表' : `编辑${markType}标注` }}</span>
      <div v-show="markType === ''">
        <div class="markList">
          <template v-if="markList.length">
            <div class="markItem" v-for="(item, index) in markList" :key="index">
              <div class="markInfo">
                <span class="markTitle">{{ item.title }}</span>
                <span class="markType">{{ item.type }}</span>
              </div>
              <div class="markBtns">
                <el-icon @click="editMarker(item)">
                  <edit />
                </el-icon>
                <el-icon>
                  <delete @click="deleteMarker(item)" />
                </el-icon>
              </div>
            </div>
          </template>
          <el-empty v-else description="暂无标注"></el-empty>
        </div>
        <div class="btns">
          <el-button v-show="addMark" @click="back">返回</el-button>
          <el-dropdown v-show="addMark" @command="handleCommand">
            <el-button type="primary">
              标注类型<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-for="(item, index) in sys_pic_type" :command="item.label" :key="item.value">
                  {{ item.label }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>

      <!-- 添加标注区域 -->
      <div v-show="markType" style="margin-top: 15px;">
        <el-form ref="rulesForm" :model="form" label-width="80px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="标题" prop="title">
                <el-input v-model="form.title" placeholder="请输入" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row v-if="markType === '文字'">
            <el-col :span="12">
              <el-form-item label="文字大小" prop="fontSize">
                <el-slider v-model="form.fontSize" :step="1" :marks="marks" :min="10" :max="30">
                </el-slider>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="文字颜色" prop="color">
                <el-color-picker v-model="form.color"></el-color-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 线条标注 -->
          <el-row v-if="['线', '面'].includes(markType)">
            <el-col :span="12">
              <el-form-item label="边框颜色" prop="lineColor">
                <el-color-picker v-model="form.lineColor" show-alpha></el-color-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="线条宽度" prop="lineWidth">
                <el-slider v-model="form.lineWidth" :step="1" :marks="lineMarks" :min="1" :max="10">
                </el-slider>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row v-if="markType === '面'">
            <el-col :span="12">
              <el-form-item label="填充颜色" prop="fillColor">
                <el-color-picker v-model="form.fillColor" show-alpha></el-color-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="描述" prop="description">
                <el-input type="textarea" maxlength="100" show-word-limit v-model="form.description" :rows="4"
                  placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row v-if="['图片'].includes(markType)">
            <el-col :span="24">
              <el-form-item label="图片">
                <el-upload :data="{ isAttachment: true }" accept=".jpg, .png, .jpeg" :headers="headers"
                  :on-success="handleAvatarSuccess" class="avatar-uploader" :action="uploadUrl" :show-file-list="false">
                  <div v-if="imageUrl" class="deleteModal">
                    <el-icon @click.stop="handleRemove" style="font-size: 20px;z-index: 99;color: white;">
                      <Delete />
                    </el-icon>
                  </div>
                  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                  <el-icon v-if="!imageUrl" style="font-size: 30px;">
                    <Plus />
                  </el-icon>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row v-if="markType === '全景'">
            <el-col :span="24">
              <el-form-item label="全景照片" prop="qjImage">
                <el-select filterable style="width: 100%;" v-model="form.qjImage" placeholder="请选择">
                  <el-option v-for=" item in qjOptions " :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="btns">
          <el-button @click="backList">返回</el-button>
          <el-button type="primary" @click="saveMarkers">保存</el-button>
        </div>
      </div>
    </div>
    <!-- 预览区域 -->
    <div id="viewer">
      <i class="el-icon-back" title="返回" @click="backStep"></i>
    </div>
  </div>
</template>

<script setup>
import { getToken } from "@/utils/auth";
import { get720List } from "@/api/720.js";
import { ElMessage } from 'element-plus'
import { onMounted, ref, nextTick, reactive, watch } from 'vue'
import { Viewer } from '@photo-sphere-viewer/core';
import { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin';
import "@photo-sphere-viewer/core/index.css"
import "@photo-sphere-viewer/markers-plugin/index.css"
import pin from "../../../../assets/images/图片标注.png";
import blue from "../../../../assets/images/红点.png";
import backImage from "../../../../assets/images/back.png";
import { useRouter } from 'vue-router'
const router = useRouter()
const { proxy } = getCurrentInstance();
const { sys_pic_type } = proxy.useDict("sys_pic_type");
const emit = defineEmits(['editAddMark', 'getMarkersData']);
const props = defineProps({
  basicData: {
    type: Object,
    default: () => { },
  },
  markerList: { // 接口返回的标注信息
    type: Object,
    default: () => { }
  },
  fullImage: {
    type: Object,
    default: () => { }
  },
  addMark: {
    type: Boolean,
    default: false,
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '72vh'
  },
})

//data
const uploadUrl = ref("/prod-api/common/uploadMinio"); // 上传的图片服务器地址
const headers = ref({
  Authorization: "Bearer " + getToken()
});
let markType = ref('');
let addOrEdit = ref('');
let imageUrl = ref('');
let viewer = ref({});
let markList = ref([]); // 标注列表
let markersPlugin = ref({});
let qjOptions = ref([]);
let marks = ref({
  10: '10px',
  15: '15px',
  20: '20px',
  25: '25px',
  30: '30px',
});


let lineMarks = ref({
  1: '1',
  2: '2',
  3: '3',
  4: '4',
  5: '5',
  6: '6',
  7: '7',
  8: '8',
  9: '9',
  10: '10',
});

let data = reactive({
  form: {
    fontSize: 15,
    color: '#000',
    lineColor: 'rgba(241, 57, 57, 0.9)',
    lineWidth: 2,
    fillColor: 'rgba(245, 6, 6, 0.5)'
  }
})
const { form } = toRefs(data);


onMounted(() => {
  init();
  let newElement = document.createElement("span");
  let textNode = document.createTextNode("请先选择全景照片!");
  newElement.appendChild(textNode);
  document.querySelector('.psv-markers').appendChild(newElement);
  getOptions();
})

// 监听
watch(addOrEdit, val => {
  backMarkers()
})

watch(() => props.fullImage, val => {
  nextTick(() => {
    if (val?.length) {
      viewer.value.setPanorama(val[0].url);
      let child = document.querySelector('.psv-markers').lastChild;
      if (child) {
        document.querySelector('.psv-markers').removeChild(child);
      }
    } else {
      // 删除了基本信息的全景照片。清空对应的标注
      markersPlugin.value.clearMarkers();
      emit('getMarkersData', []);
      markList.value = [];
      viewer.value.setPanorama(null).catch(err => {
        document.querySelector('.psv-overlay-title').textContent = '请先选择全景照片！'
        document.querySelector('.psv-overlay-image').style.display = 'none';
        let node = document.querySelector('.psv-markers').lastChild;
        if (node) {
          document.querySelector('.psv-markers').removeChild(node);
        }
      })
    }
  })
})

watch(() => props.basicData, (val) => {
  nextTick(() => {
    controlsConfig(val);
  })
}, { deep: true })

watch(form, val => {
  const current = markersPlugin.value.markers[form.value.id];
  const scrollDom = document.querySelector('.marker-description');
  const scrollDomTitle = document.querySelector('.marker-title');
  if (scrollDom && current) {
    scrollDom.innerText = form.description;
    scrollDomTitle.innerText = form.title;
  }
  if (current) {
    updateMarkes(current.config);
  }
}, { deep: true })

watch(markType, val => {
  const mark = markersPlugin.value.markers[form.value.id];
  if (mark === undefined) {
    addOrEdit.value = 'add';
  } else {
    addOrEdit.value = 'edit';
  }
})

// 获取全景标注数据
async function getOptions() {
  const res = await get720List({ groupId: router.currentRoute.value.query.groupId });
  // 过滤掉当前全景照片
  const currentId = router.currentRoute.value.query?.id;
  if (currentId) {
    qjOptions.value = res.rows.filter(item => item.id !== currentId);
  } else {
    qjOptions.value = res.rows;
  }
}

function init() {
  const config = {
    container: 'viewer',
    panorama: '',
    touchmoveTwoFingers: false,
    size: {
      height: props.height,
      width: props.width
    },
    moveSpeed: 2,
    zoomSpeed: 10,
    navbar: [ // 底部导航栏，依次是自动播放、缩放、图库、文字、全屏
      'zoom',
      'move',
      'caption',
      'fullscreen',
    ],
    plugins: [
      [
        MarkersPlugin,
        {
          markers: []
        }
      ]
    ]
  }
  viewer.value = new Viewer(config);

  // 全景图加载完成时的回调。获取标注数据
  viewer.value.addEventListener('ready', () => {
    initMarkers();
  });
  markersPlugin.value = viewer.value.getPlugin(MarkersPlugin); // 获取标注插件
  // 点击事件
  viewer.value.addEventListener('click', ({ data }) => {
    if (!markType.value) return;
    if (addOrEdit.value === 'add') {
      // 添加标注
      addwMarkers(data);
    } else {
      // 编辑标注
      updateMarkes(data);
    }
  });
  // 标注选择事件
  markersPlugin.value.addEventListener('select-marker', (data) => {
    if (!props.addMark) return;
    addOrEdit.value = 'edit';
    markType.value = data.marker.config.type;
    // 显示对应的标注信息
    editMarker(data);
  })
}
// 初始化标注
function initMarkers() {
  if (props.markerList && Object.keys(props.markerList).length > 0) {
    let target = JSON.parse(props.markerList);
    target.forEach(item => {
      markersPlugin.value.addMarker(item.config);
      markList.value.push({
        id: item.id,
        title: item.config?.html || item.config.title,
        type: item.config.type,
      });
    })
  }
}
// 添加标注
function addwMarkers(data) {
  if (!form.value.title) return ElMessage.error('请先填写标题！');
  if (!data.rightclick && markType.value === '文字') {
    markersPlugin.value.addMarker({
      id: form.value.id,
      type: '文字',
      yaw: data.yaw,
      pitch: data.pitch,
      position: {
        textureFace: 'front',
        textureX: data.textureX,
        textureY: data.textureY
      },
      html: form.value.title,
      style: {
        color: form.value.color,
        fontSize: form.value.fontSize + 'px',
      },
      anchor: 'center center',
      tooltip: {
        content: form.value.description,
        position: 'center center',
      },
      data: {
        generated: true,
      },
    });
  } else if (!data.rightclick && ['图片'].includes(markType.value)) {
    addImageMarks(data);
  }
  else if (!data.rightclick && ['全景'].includes(markType.value)) {
    if (!form.value.qjImage) return ElMessage.error('请先选择全景图片！');
    addQJMarks(data);
  } else if (!data.rightclick && ['线'].includes(markType.value)) {
    addLineMarks(data);
  } else if (!data.rightclick && ['面'].includes(markType.value)) {
    addPolygonMarks(data);
  }
  if (['文字', '图片', '全景'].includes(markType.value)) {
    saveMarkers();
  }
}
// 添加全景跳转
function addQJMarks(data) {
  markersPlugin.value.addMarker({
    id: form.value.id,
    title: form.value.title,
    type: '全景',
    link: form.value.qjImage,
    yaw: data.yaw,
    pitch: data.pitch,
    position: {
      textureFace: 'front',
      textureX: data.textureX,
      textureY: data.textureY
    },
    image: backImage,
    width: 64,
    height: 64,
    anchor: 'center center',
    tooltip: {
      content: form.value.description,
      target: 'click'
    },
    data: {
      generated: true,
    },
  });
}

// 添加图片标注
function addImageMarks(data) {
  const content = tooltipTemplate(data);
  markersPlugin.value.addMarker({
    id: form.value.id,
    type: '图片',
    title: form.value.title,
    desc: form.value.description,
    imageurl: imageUrl.value,
    yaw: data.yaw,
    pitch: data.pitch,
    position: {
      textureFace: 'front',
      textureX: data.textureX,
      textureY: data.textureY
    },
    image: pin,
    width: 16,
    height: 16,
    anchor: 'center center',
    tooltip: {
      content,
      trigger: 'click',
    },
    data: {
      generated: true,
    },
  });
}
/**
 * tooltipTemplate函数用于生成提示框的内容
 * @param {Event} e - 事件对象
 * @param {Object} data - 数据对象
 * @returns {String} - 返回生成的提示框内容
 */
function tooltipTemplate(data) {
  let attachment = '';
  if (imageUrl.value) {
    attachment = `<img class="tooltipImage" src=${imageUrl.value} />`; // 将附件图片添加到附件内容中
    attachment = `<div class='scroll-container '>${attachment}</div>`; // 将附件内容包裹在可滚动容器中
  }

  // 左右箭头
  let content = `
      <div class="marker-tooltip-container">
        ${attachment}
        <div class='marker-title'>${form.value.title || ''}</div>
        <div class="marker-description">
          ${form.value.description || ''}
        </div>
      </div>`;
  // 返回生成的提示框内容
  return content;
}

// 添加线条标注
let lineCount = 0;
let linePoints = [];
function addLineMarks(data) {
  if (lineCount === 0) {
    let marker = {
      id: 'markerLine1',
      yaw: data.yaw,
      pitch: data.pitch,
      image: blue,
      position: {
        textureX: data.textureX,
        textureY: data.textureY
      },
      width: 12,
      height: 12,
    };
    markersPlugin.value.addMarker(marker);
    lineCount++;
    linePoints.push([data.yaw, data.pitch]);
  } else if (lineCount === 1) {
    // 删除上面添加点数据
    markersPlugin.value.removeMarker('markerLine1');
    lineCount++;
    linePoints.push([data.yaw, data.pitch]);
    // 添加线条标注
    markersPlugin.value.addMarker({
      id: form.value.id,
      type: '线',
      polyline: linePoints,
      svgStyle: {
        strokeWidth: form.value.lineWidth + 'px',
        stroke: form.value.lineColor,
      },
      anchor: 'center center',
      tooltip: {
        content: form.value.description,
        position: 'center center',
      },
      data: {
        generated: true,
      },
    });
  } else {
    linePoints.push([data.yaw, data.pitch]);
    markersPlugin.value.updateMarker({
      id: form.value.id,
      polyline: linePoints,
    });
  }
}

let clickCount = 0;
let points = [];
// 添加面标注
function addPolygonMarks(data) {
  if (clickCount === 0) {
    let marker = {
      id: 'marker1',
      yaw: data.yaw,
      pitch: data.pitch,
      image: blue,
      position: {
        textureX: data.textureX,
        textureY: data.textureY
      },
      width: 12,
      height: 12,
    };
    markersPlugin.value.addMarker(marker);
    clickCount++;
    points.push([data.yaw, data.pitch]);
  } else if (clickCount === 1) {
    let marker = {
      id: 'marker2',
      yaw: data.yaw,
      pitch: data.pitch,
      image: blue,
      position: {
        textureX: data.textureX,
        textureY: data.textureY
      },
      width: 12,
      height: 12,
    };
    markersPlugin.value.addMarker(marker);
    clickCount++;
    points.push([data.yaw, data.pitch]);

    markersPlugin.value.addMarker({
      id: 'marker3',
      polyline: points,
      svgStyle: {
        strokeWidth: form.value.lineWidth + 'px',
        stroke: form.value.lineColor,
      },
    })
  } else if (clickCount === 2) {
    // 删除原来添加点和线的marker
    markersPlugin.value.removeMarker('marker1');
    markersPlugin.value.removeMarker('marker2');
    markersPlugin.value.removeMarker('marker3');
    points.push([data.yaw, data.pitch]);
    clickCount++
    markersPlugin.value.addMarker({
      id: form.value.id,
      title: form.value.title,
      type: '面',
      polygon: points,
      svgStyle: {
        fill: form.value.fillColor,
        strokeWidth: form.value.lineWidth + 'px',
        stroke: form.value.lineColor,
      },
      anchor: 'center center',
      tooltip: {
        content: form.value.description,
        position: 'center center',
      },
      data: {
        generated: true,
      },
    });
  } else {
    points.push([data.yaw, data.pitch]);
    markersPlugin.value.updateMarker({
      id: form.value.id,
      polygon: points,
    });
  }
}

// 更新标记
function updateMarkes(config) {
  if (markType.value === '文字') {
    // 编辑状态下 点击编辑  预览或者查看 点击才跳转
    markersPlugin.value.updateMarker({
      id: form.value.id,
      html: form.value.title,
      yaw: config.yaw,
      pitch: config.pitch,
      style: {
        color: form.value.color,
        fontSize: form.value.fontSize + 'px',
      },
      anchor: 'center center',
      tooltip: form.value.description,
      data: {
        generated: true,
      }
    })
  } else if (markType.value === '图片') {
    const content = tooltipTemplate();
    markersPlugin.value.updateMarker({
      id: form.value.id,
      title: form.value.title,
      dese: form.value.dedescription,
      yaw: config.yaw,
      pitch: config.pitch,
      anchor: 'center center',
      tooltip: {
        content
      },
      data: {
        generated: true,
      }
    })
  } else if (markType.value === '全景') {
    markersPlugin.value.updateMarker({
      id: form.value.id,
      link: form.value.qjImage,
      title: form.value.title,
      yaw: config.yaw,
      pitch: config.pitch,
      tooltip: form.value.description,
    })
  } else if (markType.value === '面') {
    const points = markersPlugin.value.markers[form.value.id].config.polygon;
    if (config.yaw && config.pitch) {
      points.push([config.yaw, config.pitch]);
    }
    markersPlugin.value.updateMarker({
      id: form.value.id,
      title: form.value.title,
      polygon: points,
      tooltip: form.value.description,
      svgStyle: {
        fill: form.value.fillColor,
        strokeWidth: form.value.lineWidth + 'px',
        stroke: form.value.lineColor,
      },
    })
  } else if (markType.value === '线') {
    const points = markersPlugin.value.markers[form.value.id].config.polyline;
    if (config.yaw && config.pitch) {
      points.push([config.yaw, config.pitch]);
    }
    markersPlugin.value.updateMarker({
      id: form.value.id,
      title: form.value.title,
      polyline: points,
      tooltip: form.value.description,
      svgStyle: {
        strokeWidth: form.value.lineWidth + 'px',
        stroke: form.value.lineColor,
      },
    })
  }
}
// 操作配置
function controlsConfig(data) {
  // console.log('data', data)
  if (!data) return;
  viewer.value.setOption('fisheye', data?.enableFisheye);
  viewer.value.setOption('mousewheelCtrlKey', data?.enableCtrlZoom);
  viewer.value.setOption('mousemove', data?.enableMouseInteraction);
  viewer.value.setOption('minFov', data?.minViewAngle);
  viewer.value.setOption('maxFov', data?.maxViewAngle);
  viewer.value.setOption('mousewheel', data?.enableMouseWheel);
  viewer.value.setOption('defaultZoomLvl', data?.defaultZoomLevel || 50);
  viewer.value.setOption('caption', data?.name);
  viewer.value.setOption('description', data?.remark);

  viewer.value.rotate({
    yaw: data?.defaultVerticalAngle || 0,
    pitch: data?.defaultHorizontalAngle || 0
  })
  viewer.value.setOption('sphereCorrection', { pan: data?.correctPan, tilt: data.correctTilt, roll: data?.correctRoll });
  viewer.value.zoom(data?.fullscreenButton);
  let target = {
    moveButton: 'move',
    zoomButton: 'zoom',
    downloadButton: 'download',
    remark: 'description',
    name: 'caption',
    fullscreenButton: 'fullscreen',
  }
  let arr = [];
  for (const key in target) {
    if (data[key]) {
      arr.push(target[key]);
      viewer.value.setOption('navbar', arr); // 动态隐藏导航栏工具
    } else if (!arr.length) {
      viewer.value.setOption('navbar', []); // 动态隐藏导航栏工具
    }
  }
}
// 编辑标注
function editMarker(data) {
  markType.value = data?.marker?.config?.type || data.type;
  // 说明是刚进页面，没有点击过编辑按钮
  const id = data.marker?.id || data.id
  markersPlugin.value.gotoMarker(id, 300); // 跳转到该标注
  const result = markersPlugin.value.markers[id];
  form.value.id = id;
  form.value.title = result.config?.html || result.config.title;
  form.value.description = result.config.tooltip.content;
  if (markType.value === '文字') {
    form.value.fontSize = +result.config.style.fontSize.substr(0, 2);
    form.value.color = result.config.style.color;
  } else if (markType.value === '图片') {
    form.value.title = result.config.title;
    form.value.description = result.config.desc;
    imageUrl.value = result.config.imageurl;
  } else {
    form.value.description = result.config.tooltip.content;
    form.value.qjImage = result.config.link;
  }
}

// 返回标注数据给父组件
function backMarkers() {
  let target = markersPlugin.value.markers;
  let arr = [];
  for (const key in target) {
    if (Object.hasOwnProperty.call(target, key)) {
      const element = target[key];
      arr.push({
        id: element.id,
        config: element.config,
        type: element.type,
        data: element.data,
        definition: element.definition
      })
    }
  }
  emit('getMarkersData', arr);
}

// 删除标注
function deleteMarker(row) {
  markersPlugin.value.removeMarker(row.id);
  const index = markList.value.findIndex((item) => item.id === row.id);
  markList.value.splice(index, 1);
  backMarkers();
}

// 保存标注
function saveMarkers() {
  if (!form.value.title) return ElMessage.error('请输入标题');
  const marker = markersPlugin.value.markers[form.value.id];
  if (!marker) return ElMessage.error('请添加标注信息');
  if (addOrEdit.value === 'add') {
    markList.value.push({
      id: marker.id,
      title: marker.config?.html || marker.config.title,
      type: marker.config.type,
    });
  } else {
    const target = markList.value.find((item) => item.id === marker.id);
    target.title = marker.config?.html || marker.config.title;
    target.type = marker.config.type;
  }
  backList();
}

function handleCommand(command) {
  imageUrl.value = '';
  form.value = {
    fontSize: 15,
    color: '#000',
    lineColor: 'rgba(241, 57, 57, 0.9)',
    lineWidth: 2,
    fillColor: 'rgba(245, 6, 6, 0.5)'
  };
  markType.value = command;
  form.value.id = 'marker-' + new Date().getTime();
  addOrEdit.value = 'add';
}
// 返回标注列表
function backList() {
  markType.value = '';
}
// 返回操作页
function back() {
  emit('editAddMark', false);
}

// 删除图片标注
function handleRemove(file) {
  imageUrl.value = '';
  const result = markersPlugin.value.markers[form.value.id];
  if (!result) return;
  markersPlugin.value.updateMarker({
    id: form.value.id,
    imageurl: imageUrl.value,
    tooltip: {
      content: tooltipTemplate(),
      trigger: 'click',
    }
  });
}

// 图片上传成功
function handleAvatarSuccess(response, uploadFile) {
  imageUrl.value = import.meta.env.VITE_APP_PIC_BASE_API + response.fileName;
  const result = markersPlugin.value.markers[form.value.id];
  if (!result) return;
  markersPlugin.value.updateMarker({
    id: form.value.id,
    imageurl: imageUrl.value,
    tooltip: {
      content: tooltipTemplate(),
      trigger: 'click',
    }
  });
}
onBeforeUnmount(() => {
  if (viewer.value) {
    viewer.value.destroy();
  }
}) 
</script>

<style lang="scss" scoped>
.viewHandler {
  width: 100%;
  height: 100%;
  display: flex;

  .noteMark {
    width: 500px;
    padding-right: 15px;

    .btns {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .markList {
      cursor: pointer;
      padding: 20px 0;

      .markItem {
        width: 100%;
        padding: 5px 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        &:hover {
          background-color: rgba(224, 224, 224, 0.8);
        }

        .markInfo {
          display: flex;
          flex-direction: column;

          .markType {
            font-size: 13px;
          }
        }

        .markBtns {

          .el-icon {
            font-size: 20px;
            cursor: pointer;

            &:first-child {
              margin-right: 10px;
            }
          }
        }
      }
    }
  }

  #viewer {
    position: relative;
    overflow: hidden;
    flex: 1;

    >i {
      position: absolute;
      left: 10px;
      top: 10px;
      font-size: 25px;
      z-index: 99;
      cursor: pointer;
    }
  }
}

::v-deep .psv-loader-container {
  display: none;
}

::v-deep .psv-tooltip {
  max-width: 1000px !important;
}

::v-deep .marker-tooltip-container {
  width: 300px;
  // height: 250px;
  position: relative;
  overflow: hidden;

  .marker-title {
    font-size: 18px;
    font-weight: bold;
    white-space: break-word;
  }

  .marker-description {
    word-wrap: break-word;
  }

  .scroll-container {
    height: 150px;
    width: 100%;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;

    .tooltipImage {
      width: 300px;
      height: 150px;
      object-fit: cover;
    }
  }
}

::v-deep .avatar-uploader {
  position: relative;
  width: 300px;
  height: 200px;

  .el-upload {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border: 1px dashed var(--el-border-color);
    background-color: #f5f7fa;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--el-transition-duration-fast);

    .avatar {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .el-upload-list__item-preview {
    display: none;

    .el-icon {
      display: none;
    }
  }

  &:hover .deleteModal {
    display: inline-block;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .deleteModal {
    width: 100%;
    height: 100%;
    background-color: rgba(#000000, 0.5);
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
  }
}

::v-deep .psv-markers {
  display: flex;
  align-items: center;
  justify-content: center;

  span {
    font-size: 40px;
  }
}

::v-deep .psv-overlay-title {
  font-size: 40px;
}

::v-deep .psv-fullscreen-button {
  position: absolute;
  right: 10px;
}
</style>
